<template>
    <BasicPageContentTemplate title="客户列表">
        <template #title-right>
            <el-space size="large">
                <el-button type="primary">新建</el-button>
                <el-button type="primary">编辑</el-button>
            </el-space>
        </template>
        <template #search-left>
            <el-form inline>
                <el-form-item label="姓名：">
                    <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="年龄：">
                    <el-input-number v-model.trim="form.age" :controls="false" :min="0" :max="999" :precision="0" placeholder="请输入年龄"></el-input-number>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-select v-model="form.sex" placeholder="请选择" clearable>
                        <el-option value="" label="全部"></el-option>
                        <el-option :value="1" label="男"></el-option>
                        <el-option :value="0" label="女"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <template #search-right>
            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="primary" plain="">高级搜索</el-button>
            </el-form-item>
        </template>
        <template #content>
            <el-table :data="tableData" border stripe height="100%" header-row-class-name="customer-table-header">
                <el-table-column prop="id" label="编号" width="180"/>
                <el-table-column prop="name" label="姓名" width="180"/>
                <el-table-column prop="age" label="年龄" width="180"/>
                <el-table-column prop="sex" label="性别"/>
            </el-table>
        </template>
        <template #pagination>
            <el-pagination
                v-model:current-page="pagination.current"
                v-model:page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[100, 200, 300, 400]"
                :total="400"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </template>
    </BasicPageContentTemplate>
</template>
<script setup lang="ts">
import BasicPageContentTemplate from "@components/BasicPageContentTemplate.vue";
import { ref } from "vue";
import { tableHook } from "@/hooks/tableHook";

function queryList() {
    console.log("doSomething")
    console.log(pagination)
    for (let i = 0; i < 100; i++) {
        tableData.value.push({
            id: i,
            name: '张三',
            age: 18,
            sex: '男'
        })
    }
}

const { pagination, handleCurrentChange, handleSizeChange, search, tableData, reset } = tableHook({ queryList })
const form = ref({
    name: '',
    age: undefined,
    sex: ''
})
queryList()
</script>


<style scoped lang="scss">
.customer-table-header {
    background: black;
}
</style>